<template>
  <el-dialog
    :title="title"
    :visible="open"
    append-to-body
    @open="onOpen"
    @close="$emit('close')"
    width="60%"
  >
    <div>
      <div>
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="权限" prop="permissionIds">
            <el-cascader
              v-model="queryParams.permissionIds"
              :options="category"
              :props="props"
              collapse-tags
              clearable
            ></el-cascader>
            <!-- <el-select
              multiple
              v-model="queryParams.permissionIds"
              clearable
              style="width:300px;"
            >
              <el-option
                v-for="item in authList"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              ></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="维修店" name="1">
          <el-table
            :data="tableData1"
            style="width: 100%"
            @selection-change="handleSelectionChange1"
            ref="table"
            height="500"
          >
            <el-table-column
              type="selection"
              width="55"
              :selectable="selectable"
            >
            </el-table-column>
            <el-table-column prop="id" label="编号"> </el-table-column>
            <el-table-column prop="email" label="邮箱"> </el-table-column>
            <el-table-column prop="username" label="维修店"> </el-table-column>
            <el-table-column
              label="权限"
              align="center"
              prop="cmsPermissionList"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ permissionFormat(scope.row.cmsPermissionList) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="经销商" name="2">
          <el-table
            ref="table2"
            :data="tableData2"
            style="width: 100%"
            height="500"
            @selection-change="handleSelectionChange2"
          >
            <el-table-column
              type="selection"
              width="55"
              :selectable="selectable"
            >
            </el-table-column>
            <el-table-column prop="id" label="编号"> </el-table-column>
            <el-table-column prop="email" label="邮箱"> </el-table-column>
            <el-table-column prop="username" label="经销商"> </el-table-column>
            <el-table-column
              label="权限"
              align="center"
              prop="cmsPermissionList"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ permissionFormat(scope.row.cmsPermissionList) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button style="margin-right:10px;" type="primary" @click="onSure"
        >确 定</el-button
      >
      <el-button @click="$emit('close')">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import checked from "./checked";
import { listType } from "@/api/cms/user";
const reg = /<u[^>]*>([\s\S]*?)<\/u>/g;
import { getPage as getCategoryPage } from "@/api/cms/category";

export default {
  components: { checked },
  filters: {
    filterIndexToABC(index) {
      return String.fromCharCode(65 + index);
    }
  },
  props: {
    id: {
      type: String | Number,
      default: ""
    },
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "选择人员"
    },
    m1: {
      type: Array,
      default: () => []
    },
    m2: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // open(val) {
    //   if (val) {
    //     if (this.m1) {
    //       this.$refs.table.toggleRowSelection(this.m1[0], true);
    //       // this.multipleSelection1 = this.m1;
    //     }
    //   }
    // }
  },
  data() {
    return {
      openCheckedModal: false,
      students: [],
      studentId: "",
      activeName: "1",
      tableData1: [],
      tableData2: [],
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        pan: 1,
        permissionIds: []
      },
      multipleSelection1: [],
      multipleSelection2: [],
      authList: [],
      categoryData: [],
      options: [],
      props: {
        children: "children",
        label: "categoryName",
        value: "categoryId",
        multiple: true
      },
      level2Ids: [],
      category: [],
      examCategoryIds:[]
    };
  },
  created() {},
  methods: {
    selectable(row) {
      return row.cmsPermissionList.some(x => this.examCategoryIds.indexOf(x.categoryId) > -1);
    },
    permissionFormat(cmsPermissionList) {
      let str = [];
      if (this.categoryData && this.categoryData.length > 0) {
        cmsPermissionList.forEach(item => {
          this.categoryData.forEach(category => {
            if (item.categoryId === category.categoryId) {
              str.push(category.categoryName);
            }
          });
        });
      }
      return str.join(" | ");
    },
    setCheckedNodes(type) {
      if (type == 1) {
        this.m1.forEach(x => {
          const row = this.tableData1.find(y => y.id == x.id);
          if (row) {
            this.$refs.table.toggleRowSelection(row, true);
          }
        });
      } else {
        this.m2.forEach(x => {
          const row = this.tableData2.find(y => y.id == x.id);
          if (row) {
            this.$refs.table2.toggleRowSelection(row, true);
          }
        });
      }
    },
    handleSelectionChange1(val) {
      this.multipleSelection1 = val;
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },
    getList() {
      // if (this.activeName == 1) {
      this.getList1();
      // } else {
      this.getList2();
      // }
    },
    getList1() {
      const permissionIds = new Set();
      this.queryParams.permissionIds.forEach(x => {
        x.forEach(y => {
          // if (this.level2Ids.indexOf(y) == -1) {
          permissionIds.add(y);
          // }
          // if (y < 0) {
          //   permissionIds.add(-1 * y);
          // }
        });
      });

      listType({
        ...this.queryParams,
        type: 1,
        permissionIds: Array.from(permissionIds)
      }).then(res => {
        this.tableData1 = res.rows;
        this.$nextTick(() => {
          this.setCheckedNodes(1);
        });
      });
    },
    getList2() {
      const permissionIds = new Set();
      this.queryParams.permissionIds.forEach(x => {
        x.forEach(y => {
          // if (this.level2Ids.indexOf(y) == -1) {
          permissionIds.add(y);
          // }
          // if (y < 0) {
          //   permissionIds.add(-1 * y);
          // }
        });
      });
      listType({
        ...this.queryParams,
        type: 2,
        permissionIds: Array.from(permissionIds)
      }).then(res => {
        this.tableData2 = res.rows;
        this.$nextTick(() => {
          this.setCheckedNodes(2);
        });
      });
    },
    onOpen() {
      // this.getList1();
      // this.getList2();
      getCategoryPage().then(response => {
        this.categoryData = [
          ...response.data
        ];
        const category = this.handleTree(response.data, "categoryId");
        this.category = category;
        this.examCategoryIds = response.data.filter(x=>x.type==3).map(x=>x.categoryId);
        this.getList();
      });
    },
    onSure() {
      this.$emit(
        "select",
        this.multipleSelection1 || [],
        this.multipleSelection2 || []
      );
      this.$emit("close");
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>
<style lang="scss" scoped>
//
</style>
